import * as echarts from '../../ec-canvas/echarts';

const app = getApp();
var nightValue = [0, 0, 0, 0, 0]
var noonValue = [0, 0, 0, 0, 0]
var morningValue = [0, 0, 0, 0, 0]
var tipViewMorning = ""
var tipViewNoon = ""
var tipViewNight = ""
var cost = [100, 100, 100, 100, 100,]
var cost1 = [10, 30, 60, 70, 100,]//本期比上期（大于1按1处理）
var dataCost = [100, 55, 200, 1000.01, 200000, 200, 200000]//真是的金额
var totalCost = ['100毫克', 100, 100, 100, 100]//比例综合
var totalCost1 = [100, 100, 100, 100, 100]
var visits = [100, 100, 100, 100, 100, 100, 100]
var visits1 = [100, 100, 100, 100, 100, 100, 100]//本期占总的百分比*100
var grade = ['钙', '钙', '钙钙脂肪', '2级隐患', '1级隐患',]
var myColor = ['#38B0DE', '#38B0DE', '#38B0DE', '#38B0DE', '#38B0DE',]
var myColor1 = ['#21BF57', '#21BF57', '#56D0E3', '#56D0E3', '#F57474',]
var data = {
  grade: grade,
  cost: cost,
  cost1: cost1,
  totalCost: totalCost,
  visits: visits,
  dataCost: dataCost
};

// function initChart(canvas, width, height, dpr) {
//   const chart = echarts.init(canvas, null, {
//     width: width,
//     height: height,
//     devicePixelRatio: dpr // new
//   });
  
//   canvas.setChart(chart);

//   var option = {
    
//     backgroundColor: "#ffffff",
//     color: ["#37A2DA", "#FF9F7F"],
//     xAxis: {
//       show: false
//     },
    
//     yAxis: {
//       show: false
//     },

//     radar: {
//       // shape: 'circle',
//       indicator: [{
//         name: '钙',
//         max: 500
//       },
//       {
//         name: '脂肪',
//         max: 500
//       },
//       {
//         name: '碳水化物',
//         max: 500
//       },
//       {
//         name: '蛋白质',
//         max: 500
//       },
     
//       {
//         name: '能量',
//         max: 500
//       }
//       ]
//     },
//     series: [{
//       name: '预算 vs 开销',
//       type: 'radar',
//       data: [{
//         value: [430, 340, 500, 300, 490, 400],
//         name: '预算'
//       },
//       {
//         value: [300, 430, 150, 300, 420, 250],
//         name: '开销'
//       }
//       ]
//     }]
//   };
//   // var option = {
//   //   title: {
//   //     text: '',
//   //     left: 'center'
//   //   },
//   //   color: ["#37A2DA", "#67E0E3", "#9FE6B8",'#666666'],
//   //   legend: {
//   //     data: ['A', 'B', 'C','D','E'],
//   //     top: 50,
//   //     left: 'center',
//   //     backgroundColor: 'red',
//   //     z: 100
//   //   },
//   //   grid: {
//   //     containLabel: true
//   //   },
//   //   tooltip: {
//   //     show: true,
//   //     trigger: 'axis'
//   //   },
//   //   xAxis: {
//   //     type: 'category',
//   //     boundaryGap: false,
//   //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
//   //     // show: false
//   //   },
//   //   yAxis: {
//   //     x: 'center',
//   //     type: 'value',
//   //     splitLine: {
//   //       lineStyle: {
//   //         type: 'dashed'
//   //       }
//   //     }
//   //     // show: false
//   //   },
//   //   series: [{
//   //     name: 'A',
//   //     type: 'line',
//   //     smooth: true,
//   //     data: [18, 36, 65, 30, 78, 40, 33]
//   //   }, {
//   //     name: 'B',
//   //     type: 'line',
//   //     smooth: true,
//   //     data: [12, 50, 51, 35, 70, 30, 20]
//   //   }, {
//   //     name: 'C',
//   //     type: 'line',
//   //     smooth: true,
//   //     data: [10, 30, 31, 50, 40, 20, 10]
//   //   }]
//   // };

//   chart.setOption(option);
//   return chart;
// }
function initDay(canvas, width, height, dpr) {//天
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {

    //backgroundColor: '#05274C',
    title: {
      top: '2%',
      left: 'center',
      text: '标准摄入',
      textStyle: {
        align: 'center',
        color: '#000000',
        fontSize: 18
      }
    },
    grid: {
      left: '60',
      right: '30'
    },
    xAxis: {
      type: 'category',

      data: ['能量', '蛋白质', '脂肪', '碳水化物', '钙'],
      axisLabel: {
        margin: 20,
        color: '#000000',
        textStyle: {
          fontSize: 10
        },
      },
      axisLine: {
        lineStyle: {
          color: '#d2d2d2',
        }
      },
      axisTick: {
        show: false
      },
      // data: data.grade
    },
    yAxis: [{

      show: false
    }],

    series: [{
      type: 'bar',
      barGap: '-65%',
      label: {
        normal: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 19,
          formatter:
            function (param) {
              return data.visits[param.dataIndex] + '%';
            },
        }
      },
      barWidth: '30%',
      itemStyle: {
        normal: {
          borderColor: '#4DCEF8',
          borderWidth: 2,

          //  barBorderRadius: 15,
          color: 'rgba(102, 102, 102,0)'
        },
      },
      z: 1,
      // data: data.totalCost,
      // data: da
    }, {
      type: 'bar',
      barGap: '-85%',
      barWidth: '30%',
      itemStyle: {
        normal: {
          // barBorderRadius: 16,
          color: function (params) {
            var num = myColor.length;
            return myColor[params.dataIndex % num]
          },
        }
      },
      max: 1,
      label: {
        normal: {
          show: true,
          position: 'top',
          // formatter: '{c}%'
        }
      },
      labelLine: {
        show: true,
      },
      z: 2,
      data: data.cost,
    }]
  };
  chart.setOption(option);
  return chart;
}
function initDay1(canvas, width, height, dpr) {//天
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {

   // backgroundColor: '#05274C',
    title: {
      top: '2%',
      left: 'center',
      text: '实际摄入',
      textStyle: {
        align: 'center',
        color: '#000000',
        fontSize: 18
      }
    },
    grid: {
      left: '60',
      right: '30'
    },
    xAxis: {
      type: 'category',

      data: ['能量', '蛋白质', '脂肪', '碳水化物', '钙'],
      axisLabel: {
        margin: 20,
        color: '#000000',
        textStyle: {
          fontSize: 10
        },
      },
      axisLine: {
        lineStyle: {
          color: '#d2d2d2',
        }
      },
      axisTick: {
        show: false
      },
      // data: data.grade
    },
    yAxis: [{

      show: false
    }],

    series: [{
      type: 'bar',
      barGap: '-65%',
      label: {
        normal: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 19,
          formatter:
            function (param) {
              return data.visits[param.dataIndex] + '%';
            },
        }
      },
      barWidth: '30%',
      itemStyle: {
        normal: {
          borderColor: '#4DCEF8',
          borderWidth: 2,

          barBorderRadius: 15,
          color: 'rgba(102, 102, 102,0)'
        },
      },
      z: 1,
      // data: data.totalCost,
      // data: da
    }, {
      type: 'bar',
      barGap: '-85%',
      barWidth: '30%',
      itemStyle: {
        normal: {
          // barBorderRadius: 16,
          color: function (params) {
            var num = myColor.length;
            return myColor1[params.dataIndex % num]
          },
        }
      },
      max: 1,
      label: {
        normal: {
          show: true,
          position: 'top',
          // formatter: '{c}%'
        }
      },
      labelLine: {
        show: true,
      },
      z: 2,
      data: data.cost1,
    }]
  };
  chart.setOption(option);
  return chart;
}
function initWeek(canvas, width, height, dpr) {//周
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {

    //backgroundColor: '#05274C',
    title: {
      top: '2%',
      left: 'center',
      text: '标准摄入',
      textStyle: {
        align: 'center',
        color: '#000000',
        fontSize: 18
      }
    },
    grid: {
      left: '60',
      right: '30'
    },
    xAxis: {
      type: 'category',

      data: ['能量', '蛋白质', '脂肪', '碳水化物', '钙'],
      axisLabel: {
        margin: 20,
        color: '#000000',
        textStyle: {
          fontSize: 10
        },
      },
      axisLine: {
        lineStyle: {
          color: '#d2d2d2',
        }
      },
      axisTick: {
        show: false
      },
      // data: data.grade
    },
    yAxis: [{

      show: false
    }],

    series: [{
      type: 'bar',
      barGap: '-65%',
      label: {
        normal: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 19,
          formatter:
            function (param) {
              return data.visits[param.dataIndex] + '%';
            },
        }
      },
      barWidth: '30%',
      itemStyle: {
        normal: {
          borderColor: '#4DCEF8',
          borderWidth: 2,

          //  barBorderRadius: 15,
          color: 'rgba(102, 102, 102,0)'
        },
      },
      z: 1,
      // data: data.totalCost,
      // data: da
    }, {
      type: 'bar',
      barGap: '-85%',
      barWidth: '30%',
      itemStyle: {
        normal: {
          // barBorderRadius: 16,
          color: function (params) {
            var num = myColor.length;
            return myColor[params.dataIndex % num]
          },
        }
      },
      max: 1,
      label: {
        normal: {
          show: true,
          position: 'top',
          // formatter: '{c}%'
        }
      },
      labelLine: {
        show: true,
      },
      z: 2,
      data: data.cost,
    }]
  };
  chart.setOption(option);
  return chart;
}
function initWeek1(canvas, width, height, dpr) {//周
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {

   // backgroundColor: '#05274C',
    title: {
      top: '2%',
      left: 'center',
      text: '实际摄入',
      textStyle: {
        align: 'center',
        color: '#000000',
        fontSize: 18
      }
    },
    grid: {
      left: '60',
      right: '30'
    },
    xAxis: {
      type: 'category',

      data: ['能量', '蛋白质', '脂肪', '碳水化物', '钙'],
      axisLabel: {
        margin: 20,
        color: '#000000',
        textStyle: {
          fontSize: 10
        },
      },
      axisLine: {
        lineStyle: {
          color: '#d2d2d2',
        }
      },
      axisTick: {
        show: false
      },
      // data: data.grade
    },
    yAxis: [{

      show: false
    }],

    series: [{
      type: 'bar',
      barGap: '-65%',
      label: {
        normal: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 19,
          formatter:
            function (param) {
              return data.visits[param.dataIndex] + '%';
            },
        }
      },
      barWidth: '30%',
      itemStyle: {
        normal: {
          borderColor: '#4DCEF8',
          borderWidth: 2,

          barBorderRadius: 15,
          color: 'rgba(102, 102, 102,0)'
        },
      },
      z: 1,
      // data: data.totalCost,
      // data: da
    }, {
      type: 'bar',
      barGap: '-85%',
      barWidth: '30%',
      itemStyle: {
        normal: {
          // barBorderRadius: 16,
          color: function (params) {
            var num = myColor.length;
            return myColor1[params.dataIndex % num]
          },
        }
      },
      max: 1,
      label: {
        normal: {
          show: true,
          position: 'top',
          // formatter: '{c}%'
        }
      },
      labelLine: {
        show: true,
      },
      z: 2,
      data: data.cost1,
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    isShoweyes: true,
    winWidth: 0,
    winHeight: 0,
    // tab切换
    currentTab: 0,
    ecDay: {
      onInit: initDay
      
    },
    ecDay1: {
      onInit: initDay1

    },
    ecWeek:{
      onInit: initWeek
    },
    ecWeek1: {
      onInit: initWeek1
    },
    
    
    imagePath: app.globalData.imagePath
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.echartsComponnet = this.selectComponent('#mychart-dom-graph');
    var that = this;
    wx.getSystemInfo({

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight,
        });
      }

    });
    
    
  },
  swichNav: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
      
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})